---
title: React
icon: React
---
import { Step, Steps } from 'fumadocs-ui/components/steps';

This guide covers integrating `@daveyplate/better-auth-ui` into your React project.

<Steps>
<Step>
## Setting up AuthUIProvider 

First, set up [`<AuthUIProvider />`](/components/auth-ui-provider) as it provides context and hooks required by all subsequent authentication components. Create a top-level provider to encapsulate your app:

```tsx title="src/providers.tsx"
import { AuthUIProvider } from "@daveyplate/better-auth-ui"
import { authClient } from "@/lib/auth-client"
import { useNavigate, NavLink } from "react-router-dom"

export function Providers({ children }: { children: React.ReactNode }) {
  const navigate = useNavigate()

  return (
      <AuthUIProvider
        authClient={authClient}
        navigate={navigate}
        Link={NavLink}
      >
          {children}
      </AuthUIProvider>
    )
}
```

Wrap your root component with the newly created Providers component in your main app entry point, typically in `src/main.tsx` or `src/index.tsx`.

```tsx title="src/main.tsx"
import ReactDOM from "react-dom/client"
import App from "./App.tsx"
import { BrowserRouter } from "react-router-dom"
import { Providers } from "./Providers"

ReactDOM.createRoot(document.getElementById("root")!).render(
  <BrowserRouter>
    <Providers>
      <App />
    </Providers>
  </BrowserRouter>
)
```
</Step>

<Step>
## Creating Auth Pages

Configure routes to render [`<AuthView>`](/components/auth-ui-provider) for authentication views using React Router.

Create a dynamic authentication route such as `auth/[pathname].tsx` inside your `src` directory. Here's a recommended setup:

```tsx title="src/pages/auth/AuthPage.tsx"
import { useParams } from "react-router-dom"
import { AuthView } from "@daveyplate/better-auth-ui"

export default function AuthPage() {
  const { pathname } = useParams()

  return (
    <main className="container mx-auto flex grow flex-col items-center justify-center gap-3 self-center p-4 md:p-6">
      <AuthView pathname={pathname} />
    </main>
  )
}
```

Use React Router to configure these dynamic authentication routes:

```tsx title="src/App.tsx"
import { Routes, Route } from "react-router-dom"
import AuthPage from "./pages/auth/AuthPage"

function App() {
  return (
    <Routes>
      <Route path="/auth/:pathname" element={<AuthPage />} />
    </Routes>
  )
}
```

The dynamic segment `[pathname]` covers the following default authentication views:

- `/auth/sign-in` – Sign in via email, password, social providers, or passkey (WebAuthn)
- `/auth/sign-up` – New account registration, with additional fields supported
- `/auth/magic-link` – Email login without password
- `/auth/forgot-password` – Trigger password reset email
- `/auth/reset-password` – Allow users to reset forgotten passwords
- `/auth/sign-out` – Log out action
- `/auth/settings` – User account management page (authentication required)
- `/auth/callback` – Internal OAuth/Auth callback handler (do not use directly)

Your authentication flow is now completely set up and supporting full customization capabilities.
</Step>
</Steps>
